<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-2-计算属性-组合式</title>
</head>

<body>


    <!--载入vue.js-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="Application">

        <h1>
            数字的值：{{count}}
        </h1>
        比11大还是小？
        <h1>
            计算后判断的值：{{type}}
        </h1>
        <button @click="add">Add</button>
    </div>



    <script>
        const app = Vue.createApp({
            setup() {
                const count = Vue.ref(10)

                const add = () => {
                    count.value++
                }

                const type = Vue.computed({
                    get() {
                        return count.value > 11 ? "大" : "小"
                    },

                    //设置值
                    //set(newValue) {
                    //    if (newValue == "大") {
                    //        count.value = 11
                    //    } else {
                    //        count.value = 0
                    //    }
                    //}
                })


                return {
                    count,
                    add,
                    type
                }
            }
        })

        app.mount("#Application")
        //创建组件并获取组件实例
        //let instance = Vue.createApp(App).mount("#Application")
        //像访问普通属性一样访问计算属性
        //初始值为0
        //console.log(instance.count)
        //初始状态为小
        //console.log(instance.type)

        //对计算属性进行修改
        //instance.type = "大"

        //打印结果为11
        //console.log(instance.count)
    </script>

    <style>

    </style>


</body>

</html>